<template>
  <div class="boss">
    <head-page id="backstyle" title="大项目"></head-page>
    <Banner id="5" class="bannerId"></Banner>
    <div class="text title-center l-h">
      <div class="yuan"></div>
      {{ title }}({{ this.$route.query.title }})
    </div>
    <div class="war fcc" v-if="list.length">
      <div class="area-center title-center">
        <h3>{{ this.$route.query.i }}</h3>
        <!-- <div class="screen" 
        @click="show"
        >筛选地区</div> -->
        <div class="umit m-t-0">
          <div
            class="xiao flex aic m-t-07"
            v-for="(item, index) in list"
            :key="index"
            @click="appletpage(item.text)"
          >
            <div class="left">
              <div>{{ index + 1 }}.</div>
            </div>
            <div>
              {{ item.projectName }}
            </div>
          </div>
        </div>
        <Provice-page v-if="region"></Provice-page>
      </div>
    </div>
    <div class="tac c999 m-t-20" v-else>暂无数据</div>
  </div>
</template>

<script>
import { projectTitle, projectByTitle } from "@/api/index";
import Banner from "@/components/Home/BannerView.vue";
export default {
  data() {
    return {
      list: [],
      title: sessionStorage.getItem("LargeName"), //获取头部大项目的类别
      screen: false, //筛选隐藏
      region: false,
      projecttypeId: this.$route.query.id,
    };
  },
  components: {
    Banner,
  },
  methods: {
    appletpage() {
      this.$router.push({ path: "/largeapplet" });
    },
    //筛选事件
    show() {
      // this.screen = true;
      this.region = true;
    },
  },
  mounted() {
    let data = {
      projecttypeId: this.$route.query.id,
      projectAddress: this.$route.query.citysub,
    };
    if (
      this.$route.query.title == "福建省项目" ||
      this.$route.query.title == "全国各省项目" ||
      this.$route.query.title == "海外项目"
    ) {
      projectTitle(data).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
          // this.title = res.data.rows[0].projecttypeId;
        }
      });
    } else {
      projectByTitle({
        projecttypeId: this.$route.query.id,
      }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
          // this.title = res.data.rows[0].projecttypeId;
        }
      });
    }
  },
};
</script>

<style scoped>
.boss {
  width: 100%;
}

.text {
  width: 100%;
  display: flex;
  justify-content: center;
 
}

.bottom {
  width: 100%;
  height: 2rem;
}
.center {
  width: 98%;
  height: 100%;
}
/* 筛选 */
.screen {
  width: 1rem;
  height: 0.3rem;
  float: right;
  text-align: center;
  line-height: 0.3rem;
  background-color: aqua;
}
.umit {
  width: 100%;
  min-height: 0.4rem;
}
.xiao {
  width: 100%;
}
/* 左边区域 */
.xiao .left {
  width: 5%;
  height: 100%;
  margin: 0 0.03rem 0 0.1rem;
}
.xiao .left img {
  width: 0.17rem;
  height: 0.3rem;
}
/* 中间区域 */
.zhong {
  height: 100%;
  line-height: 0.3rem;
  padding-left: 5px;
  display: inline-block;
}
</style>